<!DOCTYPE html>
<html>
<head>
    <title>{{ action }}数据对比</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min_v5.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/png">
        <style>
        /* 核心解决方案 */
        .auto-wrap-table {
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
        }

        .auto-wrap-table th,
        .auto-wrap-table td {
            border: 1px solid #ddd;
            padding: 8px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* 设置列宽 */
        .auto-wrap-table th:nth-child(1),
        .auto-wrap-table td:nth-child(1) {
            width: 10%;
        }

        .auto-wrap-table th:nth-child(2),
        .auto-wrap-table td:nth-child(2) {
            width: 45%;
        }

        .auto-wrap-table th:nth-child(3),
        .auto-wrap-table td:nth-child(3) {
            width: 45%;
        }
    </style>
</head>
<body style="padding: 10px">
<form>
    <h1>APP渠道对比</h1>
    <table class="table table-bordered  auto-wrap-table">
        <thead>
            <tr>
                <th>字段</th>
                <th>第七轮</th>
                <th>重构后</th>
            </tr>
        </thead>
        <tbody>
            {% if old_app_value%}
                {% for key in old_app_value.keys() %}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ old_app_value[key] }}</td>
                        <td>{{ new_app_value[key] }}</td>
                    </tr>
                {% endfor %}
            {% endif %}
            {% if not old_app_value and new_app_value %}
                {% for key in new_app_value.keys() %}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ old_app_value[key] }}</td>
                        <td>{{ new_app_value[key] }}</td>
                    </tr>
                {% endfor %}
            {% endif %}
            {% if not old_app_value and not new_app_value %}
                <tr>
                    <td>--</td>
                    <td>None</td>
                    <td>None</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
    <h1>PC渠道对比</h1>
    <table class="table table-bordered  auto-wrap-table">
        <thead>
            <tr>
                <th>字段</th>
                <th>旧PC值</th>
                <th>新PC值</th>
            </tr>
        </thead>
        <tbody>
            {% if old_pc_value%}
                {% for key in old_pc_value.keys() %}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ old_pc_value[key] }}</td>
                        <td>{{ new_pc_value[key] }}</td>
                    </tr>
                {% endfor %}
            {% endif %}
            {% if not old_pc_value and new_pc_value %}
                {% for key in new_pc_value.keys() %}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ old_pc_value[key] }}</td>
                        <td>{{ new_pc_value[key] }}</td>
                    </tr>
                {% endfor %}
            {% endif %}
            {% if not old_pc_value and not new_pc_value %}
                <tr>
                    <td>--</td>
                    <td>None</td>
                    <td>None</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('table.table').forEach(function(table) {
        table.querySelectorAll('tbody tr').forEach(function(row) {
            var oldCell = row.cells[1]; // 旧值
            var newCell = row.cells[2]; // 新值
            if (oldCell && newCell && oldCell.textContent !== newCell.textContent) {
                newCell.style.backgroundColor = '#ffeeba'; // 浅黄色高亮
            }
        });
    });
});
</script>
</body>